<template>
  <div id="app">
 <div class="container">
         <div class="main "> 中间得内容 </div>
        <div class ="left">左边内容</div>
        <div class ="right ">右边内容</div>
        </div> 
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
   
  },
   data () {
      return {
      
      };
    }
}
</script>

<style lang="less" scoped>
    // scoped 只对当前页面有效
   .container div{
            height: 200px;
        }
.container {
   padding: 0 100px;
    height: 200px;
  .main {
     position: relative;
     float: left;
      width: 100%;
      background-color: cadetblue;
  }

  .left {
    width: 100px;
  position: relative;
   float: left;
    margin-left: -100%;
   left:-100px;
background: chocolate;
  }

  .right{
    width: 100px;
     position: relative;
     float: left;
    margin-left: -100px;
    left: 100px;
    background: cornflowerblue;
  }
}
        
</style>
